<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>电子签名截屏</title>
    <!--<link rel="stylesheet" href="css/style.css">-->
    <style>
        .canvasDiv {
            width: 800px;
            height: 500px;
            border: 1px solid gray;
        }

        #editing_area {
            width: 800px;
            height: 500px;
            border: 1px solid darkred;
        }
        #canvasEdit {
            width: 800px;
            height: 500px;
            border: 1px solid gold;
        }
    </style>
</head>


<th>用户ID</th>
<th>用户详情</th>
<th>用户名</th>
<th>昵称</th>
<th>密码</th>
<th>头像</th>
<th>邮箱</th>
<th>微信ID</th>
<th>阿里支付ID</th>
<th>性别</th>
<th>生日</th>
<th>电话</th>
<th>创建时间</th>
<th>是否启动</th>
<th>是否锁定</th>
<th>用户类型</th>
<th>个人简介</th>
<th>删除标记</th>

<td>1</td>
<td><a class="details" href="javascript:;">详情</a></td>
<td>AllenChen</td>
<td>超级管理员</td>
<td>123456</td>
<td>
    <img style="width: 40px;height: 40px" alt="" src="../../images/photos/user.jpg" class="media-object" >
</td>
<td>www.baidu.com</td>
<td class="center">usudsidsdssdsds</td>
<td class="center">usudsidsdssdsds</td>
<td class="center">
    <p>男</p>
</td>
<td class="center">2022年04月11日</td>
<td class="center">17779683224</td>
<td class="center">2022-01-11 01：40</td>
<td class="center">启用</td>
<td class="center">未锁定</td>
<td class="center">超级管理员</td>
<td class="center">你好，我叫Allen</td>
<td class="center">未删除</td>


<body>
<div class="canvasDiv">
    <div id="editing_area">
        <canvas id="canvasEdit"></canvas>
    </div>
</div>
<div class="btnDiv">
    <a id="sign_clear" class="clearBtn">清除</a>
    <a id="sign_clear1" class="down none" download="download">下载</a>
    <a id="sign_clear2" class="clearBtn">截屏</a>
</div>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="./userjs/esign.js"></script>
<script type="text/javascript" src="./userjs/html2canvas.min.js"></script>
<script type="text/javascript">
    function convertCanvasToImage(canvas) {
        return canvas.toDataURL("image/png");
    };

    function takeScreenshot() {
        html2canvas(document.body, {
            width: document.body.clientWidth / 2 + 1,
        }).then(function(canvas) {
            alert('截取成功');
            var imgUrl = convertCanvasToImage(canvas); //截取图片路径,该路径为服务器参数
            console.log(imgUrl);
            document.querySelector(".down").setAttribute('href', imgUrl);
            $('#sign_clear1').removeClass('none');
        });
    };
    $(function() {
        //初始化
        $(document).esign("canvasEdit", "sign_show", "sign_clear", "sign_ok");
        $(document).on('click', '#sign_clear2', takeScreenshot);
    });
</script>
</body>

</html>
